<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;

    }

    .layout-assistant{
        width: 300px;
        margin: 0 auto;
        height: inherit;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-content-main{
        min-height: 500px;
        padding:10px;
    }
    .ivu-menu{
        min-height:500px;
    }
</style>
<template>
    <div>

        <div class="layout-content">
            <Row>
                <Col span="5">
                <Menu active-name="1-2" width="auto" :open-names="['1']">
                    <Tree :data="data1" ref="tree" @on-select-change="selectChange"></Tree>
                </Menu>
                </Col>
                <Col span="19">
                <div class="layout-content-main">
                    <Upload
                            multiple
                            type="drag"
                            name="avatar"
                            :data="{cateId:cateId}"
                            action='http://localhost:3000/upload/upload'
                            :before-upload="beforeUpload"
                            :on-success="handleSuccess">
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击或将文件拖拽到这里上传</p>
                        </div>
                    </Upload>

                    <!--表格-->
                    <Table border :columns="columns" :data="filter.list"
                           @on-selection-change="onSelectionChange"
                           @on-row-dblclick='dbclick'></Table>
                    <!--分页-->
                    <Page :total="filter.total" size="small" show-total show-elevator show-sizer
                          @on-change="pageChange"
                          @on-page-size-change="pageSizeChange"></Page>

                </div>
                </Col>
            </Row>
        </div>

    </div>
</template>

<script type="text/javascript">
	import {mapGetters,mapActions} from 'vuex';
	import Base from './../common/baseUpload';
	export default{
		mixins:[Base],
        data(){
			return{
				cateId:'',
				type:"upload",
                module1:"cate",
				columns: [
					{
						title: '文件名',
						key: 'filename'

					},
					{
						title: '路径',
						key: 'path'
					},
					{
						title: '大小',
						key: 'size'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row._id)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				filter: {
					list: [],
					total: 0,
					page: 1,
					rows: 10,
                    cateId:''
                }
            }
        },
        methods:{
            ...mapActions(['checkmodal8','checkvalue']),
			getData(){
//				console.log(this.filter);
				this.$http.post('http://localhost:3000/upload/list', this.filter)
					.then(res => {
//						console.log(res.data);
						this.filter.list = res.data.rows;
						this.filter.total = res.data.total;
						this.filter.page = res.data.page;
					})
			},
            //表格复选
			onSelectionChange(selections){

				var ids = [];
				if (selections && selections.length > 0) {
					var ids = [];
					let selectionLen = selections.length;
					for (let i = 0; i < selectionLen; i++) {
						ids.push(selections[i]._id);
					}
					this.ids = ids;
				}
			},
			pageChange(page){
				this.filter.page = page;
				this.getData();
			},
			pageSizeChange(pagesize){
				this.filter.rows = pagesize;
				this.getData();
			},
			//树选中
			selectChange(row){
//				console.log(row);
				if(row &&row.length>0){
					let id = row[0]._id;
//					console.log(id);
					this.$http.post(`http://localhost:3000/cate/id/${id}`)
						.then(res=>{
							this.filter.cateId = JSON.stringify(res.data);
							this.getData();
//							console.log(11);
						})
//					console.log(id);
					this.cateId = id;
//				console.log(this.formValidate.cateId);
				}

			},
			//删除
			remove (id) {
				this.$Modal.confirm({
					title: '确认删除数据',
					content: '<p>确认删除该数据吗</p>',
					onOk: () => {
						this.$Message.info('删除成功');
						this.$http.delete(`http://localhost:3000/upload/data/${id}`)
							.then((res) => {
								this.getData();
							})
					},
					onCancel: () => {
					}
				});
			},
			handleSuccess(){
				this.getData();
            },
			beforeUpload(){

				if(this.cateId==''){
                    this.$Message.warning('请选择你要上传的类别');
                    return false;
                }else{
                    return true;
                }
            },
			dbclick(value,index){
				console.log(value, index);
				this.checkmodal8(false);
				this.checkvalue(value)
			}

		},
        created(){
			this.getData();
        },

    }
</script>
